<template>
    <div class="my-container">
        <!-- 一登录 -->
        <div v-if="user" class="header user-info">
            <div class="base-info">
                <div class="left">
                    <van-image
                    round
                    fit="cover"
                    class="avatar"
                    :src="userInfo.photo"
                    />
                    <span class="name">{{userInfo.name}}</span>
                </div>
                <div class="right">
                    <van-button round size="mini">编辑资料</van-button>
                </div>
            </div>
            <div class="data-stas">
                <div class="data-item">
                    <span class="count">{{userInfo.art_count}}</span>
                    <span class="text">头条</span>
                </div>
                <div class="data-item">
                    <span class="count">{{userInfo.follow_count}}</span>
                    <span class="text">关注</span>
                </div>
                <div class="data-item">
                    <span class="count">{{userInfo.fans_count}}</span>
                    <span class="text">粉丝</span>
                </div>
                <div class="data-item">
                    <span class="count">{{userInfo.like_count}}</span>
                    <span class="text">互赞</span>
                </div>
            </div>
        </div>
        <!-- 未登录 -->
        <div v-else class="header not-login">
            <div class="login-btn" @click="$router.push('/login')">
                <img class="mobile-img" src="@/assets/mobile.png" alt="">
                <span class="text">登录 / 注册</span>
            </div>
        </div>
        

        <!-- 导航 -->
        <van-grid class="grid-nav" clickable :column-num="2">
            <van-grid-item class="grid-item">
                <i slot="icon" class="toutiao toutiao-shoucang"></i>
                <span slot="text" class="text">收藏</span>
            </van-grid-item>
            <van-grid-item class="grid-item">
                <i slot="icon" class="toutiao toutiao-lishi"></i>
                <span slot="text" class="text">历史</span>
            </van-grid-item>
        </van-grid>

        <!--  -->
        <van-cell title="消息通知" is-link />
        <van-cell class="mb-9" title="小智同学" is-link />
        <van-cell clickable v-if="user" @click="onLogout" class="logout-cell" title="退出登录" />
    </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserInfo } from "@/api/user";
export default {
    name:"MyIndex",
    data(){
        return{
            userInfo:{}
        }
    },
    computed:{
        ...mapState(['user'])
    },
    methods:{
        onLogout(){
            this.$dialog.confirm({
                title: '确认退出吗？',
            }).then(() => { //确认
                // vuex的user清除 本地存储的信息清除
                this.$store.commit('setUser',null)
            }).catch(() => { //取消
                // on cancel
            });
        },
        async loadUserInfo(){
            try {
                const { data } = await getUserInfo()
                this.userInfo = data.data
            } catch (error) {
                this.$toast('获取数据失败，请稍后再试')
            }
        }
    },
    created(){
        // 如果用户登录 才加载用户信息
        if (this.user) {
            this.loadUserInfo()
        }
    }
};
</script>

<style lang="less" scoped>
    .my-container{
        .header{
            height: 361px;
            background:url('~@/assets/banner.png');
            background-size: cover;
        }
        .not-login{
            display: flex;
            justify-content: center;
            align-items: center;
            .login-btn{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .mobile-img{
                    width: 132px;
                    height: 132px;
                    margin-bottom: 15px;
                }
                .text{
                    font-size: 28px;
                    color: #fff;
                }
            }
        }
        .user-info{
            .base-info{
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 231px;
                padding: 76px 32px 23px;
                box-sizing: border-box;
                .left{
                    display: flex;
                    align-items: center;
                    .avatar{
                        width: 132px;
                        height: 132px;
                        margin-right: 23px;
                        border: 4px solid #fff;
                    }
                    .name{
                        color: #fff;
                        font-size: 30px;
                    }   
                }
            }
            .data-stas{
                padding: 0 23px;
                box-sizing: border-box;
                display: flex;
                .data-item{
                    flex: 1;
                    color: #fff;
                    height: 130px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    .count{
                        font-size: 36px;
                    }
                    .text{
                        font-size: 23px;
                    }
                }
            }
        }
        .grid-nav{
            margin-bottom: 9px;
            .grid-item{
                height: 141px;
                i.toutiao{
                    font-size: 45px;
                }
                .toutiao-shoucang{
                    color: #eb5253;
                }
                .toutiao-lishi{
                    color: #ff9d1d;
                }
                span.text{
                    font-size: 28px;
                }
            }
        }
        .mb-9{
            margin-bottom: 9px;
        }
        .logout-cell{
            text-align: center;
            color: #eb5253;
        }
    }
</style>